<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>学生成绩管理系统</title>
    <meta name="keywords" content="学生成绩管理系统">
    <link href="https://lib.baomitu.com/twitter-bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/helper.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">

</head>

<body class="fix-header fix-sidebar">

<div id="main-wrapper">
    <div class="unix-login">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-lg-4">
                    <div class="login-content card">
                        <div class="login-form">
                            <h4>学生成绩管理系统</h4>
                            <div>
                                <div style="color: red" class="form-group" id="msg" hidden></div>
                                <div class="form-group">
                                    <label>登录名</label>
                                    <input type="text" id="username" class="form-control" placeholder="登录名">
                                </div>
                                <div class="form-group">
                                    <label>登录密码</label>
                                    <input type="password" id="password" class="form-control" placeholder="密码">
                                </div>
                                <button type="submit" id="login" class="btn btn-primary btn-flat m-b-30 m-t-30">登录</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://lib.baomitu.com/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script>

    $('body').keydown(function(event) {
        if (event.keyCode === 13) {
            $('#login').click();
        }
    });

    $('#login').click(function () {

        var username = $('#username').val();
        var password = $('#password').val();

        if (username === '' || password === '') {
            $('#msg').html('登录名或密码不能为空。').removeAttr('hidden');
            return false;
        }

        $.ajax({
            url: '/login',
            type: 'post',
            data: {
                username: username,
                password: password
            },
            success: function (res) {
                console.log(res)
                if (res.code === 0) {
                    window.location.href = res.data;
                } else {
                    $('#msg').html('登录名或密码错误。').removeAttr('hidden');
                }
            },
            beforeSend: function () {
                $('#login').attr({ disabled: 'disabled' });
            },
            complete: function () {
                $('#login').removeAttr('disabled');
            },
            error: function (e) {
                alert('系统异常。');
            }
        })
    });

</script>
</body>

</html>